<template>
    <div class="mt-4 mb-4 text-5">上游渠道备付金</div>
    <NFlex>
        <NCard class="w-100" title="USDT钱包提币账户">
            <NStatistic label="账户总余额">
                {{ reserves?.usdtWithDrawAccount.totalBalance }}
                <template #suffix>USDT</template>
            </NStatistic>

            <NStatistic label="账户可用余额" class="mt-4">
                {{ reserves?.usdtWithDrawAccount.available }}
                <template #suffix>USDT</template>
            </NStatistic>
        </NCard>

        <NCard class="w-100" title="MasterCard 账户">
            <NStatistic label="资金卡账户"> {{ reserves?.masterCardAccount.cardNumber || '--' }} </NStatistic>

            <NStatistic label="账户可用余额" class="mt-4"> {{ reserves?.masterCardAccount.available }}</NStatistic>
        </NCard>
    </NFlex>
    <div class="mt-4 mb-4 text-5">企业备付金账户余额</div>
    <NFlex>
        <NCard class="w-100" title="USDT账户">
            <NStatistic label="资金账户 ID">
                {{ reserves?.usdtAccount.accountId || '--' }}
            </NStatistic>

            <NStatistic label="账户总余额" class="mt-4">
                {{ reserves?.usdtAccount.available }}
                <template #suffix>USDT</template>
            </NStatistic>
            <template #footer>
                <div class="text-right"><NButton @click="recharge('USDT')" type="primary">充值</NButton></div>
            </template>
        </NCard>

        <NCard class="w-100" title="HKD 账户">
            <NStatistic label="资金账户ID"> {{ reserves?.hkdAccount.accountId || '--' }} </NStatistic>

            <NStatistic label="账户可用余额" class="mt-4">
                {{ reserves?.hkdAccount.available }} <template #suffix>HKD</template></NStatistic
            >
            <template #footer>
                <div class="text-right"><NButton @click="recharge('HKD')" type="primary">充值</NButton></div>
            </template>
        </NCard>
    </NFlex>
</template>

<script lang="tsx" setup>
import { ref } from 'vue'
import { useDialog, NInput, useMessage } from 'naive-ui'
import { queryReserves, deposit } from '@/api/bill'

const reserves = ref<Api.Bill.Reserves | null>(null)
async function queryData() {
    const [err, res] = await queryReserves()
    if (!err && res) {
        reserves.value = res
    }
}
queryData()

const message = useMessage()
const dialog = useDialog()
function recharge(coin: string) {
    const amount = ref<string>()
    const accountId = coin === 'USDT' ? reserves.value?.usdtAccount.accountId : reserves.value?.hkdAccount.accountId
    if (!accountId) {
        message.error('暂无帐户')
        return
    }
    const d = dialog.warning({
        title: '充值 USDT',
        content: () => <NInput v-model:value={amount.value} placeholder={`请输入充值${coin}额度`} />,
        positiveText: '确定',
        negativeText: '取消',
        onPositiveClick: async () => {
            if (!amount.value?.trim()) {
                message.error('请输入额度')
                return false
            }
            d.loading = true
            const [err, res] = await deposit({ accountId, amount: amount.value })
            d.loading = false
            if (!err) {
                message.success('充值成功')
                queryData()
            } else {
                return false
            }
        }
    })
}
</script>
